ul {
    text-decoration: none;
    list-style-type: none;
    padding: 0;
}

li {
    text-decoration: none;
    color: black;
}

.header-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 50%;
    align-items: center;
    /* background-color: #4b8dff; */
    border: 0px solid white;

}

.header-area .search {
    width: 100%;
    flex-grow: 0.5;
    background-color: #c83c23;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 1em;
}

.header-area .search .search-input {
    width: 80%;
}

.header-area .carousel-container {
    width: 100%;
}

.header-area .carousel-container .carousel {
    width: 100%;
    flex-grow: 2;
    display: flex;
    /* overflow: hidden; */
    align-items: center;
    justify-content: center;
    background-color: #c83c23;
}

.carousel .goods-advertisment {
    margin-top: 20px;
    width: 400px;
    overflow: hidden;
    transform: translateY(1em);
}

.carousel .goods-advertisment .contentStyle {
    margin: 0;
    color: #fff;
    height: 270px;
    text-align: center;
    background: #364d79;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.carousel .goods-advertisment .contentStyle .advertisement-img-container {
    width: 400px;
    height: 270px;
}

.carousel .goods-advertisment .contentStyle .advertisement-img-container img {
    width: 400px;
    overflow: hidden;
}

.header-area .tag-area {
    width: 100%;
    flex-grow: 0.5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 1em;
    padding-left: calc(10%);
    padding-right: calc(10%);
    padding-top: 2em;
    background-color: #fff;
}

.tag-area .tag-container {
    width: 20%;
    display: flex;
    flex-direction: column;
}

.tag-area .tag-container .img-container {
    flex-grow: 2;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    /* align-self: center; */
    /* justify-content: center; */
}

.tag-area .tag-container .img-container img {
    position: absolute;
    max-width: 70%;
    max-height: 70%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tag-area .tag-container h4 {
    flex-grow: 1;
    line-height: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: black;
}

.goods-area {
    margin-top: 1em;
    width: 100%;
    display: flex;
    height: 50%;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: white;
}

.goods-area .goods-container {
    width: 45%;
    aspect-ratio: 1/1.5;
    display: flex;
    flex-direction: column;
    margin-top: 1em;
}

.goods-container .goods-img-container {
    flex-grow: 4;
    width: 100%;
    background-color: white;
}

.goods-container .introduction {
    margin-top: 1em;
    flex-grow: 1;
    display: -webkit-box;
    /* 设置为弹性盒子以使用 -webkit-line-clamp */
    -webkit-box-orient: vertical;
    /* 设置为垂直方向排列 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    -webkit-line-clamp: 2;
    /* 最大显示两行文本 */
    font-size: 16px;
    font-weight: 400;
    color: black;
}

.goods-container .price {
    margin-top: 1em;
    flex-grow: 1;
    display: -webkit-box;
    /* 设置为弹性盒子以使用 -webkit-line-clamp */
    -webkit-box-orient: vertical;
    /* 设置为垂直方向排列 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    -webkit-line-clamp: 2;
    /* 最大显示两行文本 */
    font-size: 16px;
    font-weight: 400;
    color: rgb(223, 104, 0);
}

.goods-container .goods-img-container img {
    max-width: 100%;
    max-height: 100%;
}

@media (orientation: landscape) {
    .header-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 50%;
        align-items: center;
        /* background-color: #4b8dff; */
        border: 0px solid white;


    }

    .advertisement-top-img-container {
        position: relative;
        width: 100%;
        height: 80px;
        overflow: hidden;
    }

    .advertisement-top-img-container .advertisement-img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        height: 100%;
    }

    .header-area .search {
        width: 100%;
        height: 100px;
        flex-grow: 0.5;
        background-color: #fff;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-top: 1em;
        border-radius: 10px;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .header-area .search .search-input {
        width: 492px;
        height: 38px;
        border: 2px solid orange;
    }

    .header-area .search .our-logo {
        width: 100px;
        padding-right: 10px;
    }

    .header-area .carousel-container {
        width: 80%;
        height: 600px;
        position: relative;
        margin-top: 20px;
        background-color: #fff;
    }

    .header-area .hot-goods {
        position: absolute;
        width: 30%;
        height: 560px;
        right: 98px;
        top: 20px;
        background-color: rgb(253, 240, 220);
        padding-left: 1em;
        box-sizing: border-box;
        margin-top: 10px;
        border-radius: 10px;
    }

    .hot-goods li {
        margin-top: 16px;
        display: flex;
    }

    .hot-goods li label {
        display: inline-block;
        width: 36px;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        text-align: center;
        background-color: rgb(250, 217, 186);
        color: rgb(223, 37, 0);
    }

    .hot-goods li .hot-link {
        margin-left: 16px;

        display: inline-block;
        width: calc(100% - 50px);
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        text-align: center;
        color: black;
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        text-overflow: ellipsis;
        /* 使用省略号表示被省略的文本 */
        white-space: nowrap;
        text-decoration: none;
        font-weight: 400;
    }

    .hot-goods li .hot-link:hover {
        color: rgb(223, 37, 0);
    }

    .header-area .carousel-container .carousel {
        position: absolute;
        width: 60%;
        height: 287px;
        left: 0;
        display: flex;
        overflow: hidden;

        align-items: center;
        justify-content: center;
        background-color: #fff;
    }

    .header-area .carousel-container .carousel:nth-child(1) {
        top: 0;
    }

    .header-area .carousel-container .carousel:nth-child(3) {
        top: 287px;
    }

    .carousel .goods-advertisment {
        margin-top: 20px;
        width: 400px;
        overflow: hidden;
    }

    .carousel .goods-advertisment .contentStyle {
        margin: 0;
        height: 270px;
        text-align: center;
        background: #364d79;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .carousel .goods-advertisment .contentStyle .advertisement-img-container {
        width: 400px;
        height: 270px;
    }

    .carousel .goods-advertisment .contentStyle .advertisement-img-container img {
        width: 400px;
        overflow: hidden;

    }

    .header-area .tag-area {
        width: 80%;
        flex-grow: 0.5;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        margin-top: 0;
        background-color: #fff;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .tag-area .tag-container {
        width: 20%;
        display: flex;
        flex-direction: row;
    }

    .tag-area .tag-container .img-container {
        flex-grow: 1;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        position: relative;
        /* align-self: center; */
        /* justify-content: center; */
    }

    .tag-area .tag-container .img-container img {
        position: absolute;
        max-width: 70%;
        max-height: 70%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .tag-area .tag-container h4 {
        flex-grow: 1;
        height: 100%;
        line-height: 83px;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        color: black;
        margin: 0;
    }

    .goods-area {
        position: relative;
        left: 10%;
        margin-top: 10px;
        width: 80%;
        display: flex;
        height: 50%;
        justify-content: space-around;
        flex-wrap: wrap;
        background-color: white;
    }

    .goods-area .goods-container {
        width: 20%;
        aspect-ratio: 1/1.5;
        display: flex;
        flex-direction: column;
        margin: 10px 10px 0 10px;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid transparent;
    }

    .goods-container .goods-img-container {
        flex-grow: 4;
        width: 100%;
        background-color: white;
    }

    .goods-container:hover {
        border: 1px solid rgb(223, 104, 0);
    }

    .goods-container .introduction {
        margin-top: 10px;
        flex-grow: 1;
        display: -webkit-box;
        /* 设置为弹性盒子以使用 -webkit-line-clamp */
        -webkit-box-orient: vertical;
        /* 设置为垂直方向排列 */
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        -webkit-line-clamp: 2;
        /* 最大显示两行文本 */
        font-size: 16px;
        font-weight: 400;
        color: black;

    }

    .goods-container .price {
        margin-top: 10px;
        flex-grow: 1;
        display: -webkit-box;
        /* 设置为弹性盒子以使用 -webkit-line-clamp */
        -webkit-box-orient: vertical;
        /* 设置为垂直方向排列 */
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        -webkit-line-clamp: 2;
        /* 最大显示两行文本 */
        font-size: 16px;
        font-weight: 400;
        color: rgb(223, 104, 0);

    }

    .goods-container .goods-img-container img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 10px;
    }

}